import { useSelector } from 'react-redux';
import { ArrowLeft } from '@nutui/icons-react-taro';
import { NavBar, Swiper, Button, Input } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import { getUser } from '@/utils/user';
import Taro from '@tarojs/taro';
import CardVip from './components/card-vip';
import { useState } from 'react';
import request from '@/utils/request';
import { payment } from '@/utils/wxpay';
import './index.less';

export default function Index() {
  const user = getUser();
  const barHeight = useSelector((state: any) => state.system.barHeight);
  const [swiperIndex, setSwiperIndex] = useState(user.level - 1);
  const [inviteCode, setInviteCode] = useState('');
  const vipCardList = [
    {
      level: 1,
      currentLevel: user.level === 1,
      points: 500,
      title: '解锁AI工具月入过万赚钱方式',
    },
    {
      level: 2,
      currentLevel: user.level === 2,
      points: 1000,
      title: '投喂额度折扣',
    },
    {
      level: 3,
      currentLevel: user.level === 3,
      points: 3000,
      title: '加入VIP群聊',
    },
    {
      level: 4,
      currentLevel: user.level === 4,
      points: 3000,
      title: '定制化AI需求',
    },
  ];

  const initPayment = async () => {
    const user = getUser();
    // 跳转至联系管理页面
    Taro.navigateTo({ url: '/pages/contact-manage/index' });
    return;

    const order = await request.post<{ prepayId: string }>(
      '/order/payfor/vip/mock',
      {
        userId: user.id,
        price: 99,
        token: 990,
        invitationCode: inviteCode,
      }
    );
    if (order.prepayId) {
      await payment(order.prepayId, onPaySuccess, onFailed);
    }
  };

  return (
    <View className="vip-center">
      <NavBar
        style={{ position: 'fixed', top: `${barHeight}px` }}
        back={<ArrowLeft size={18} />}
        onBackClick={() => Taro.navigateBack()}
      />
      <Swiper
        className="vip-swiper"
        defaultValue={swiperIndex}
        previousMargin="24px"
        nextMargin="24px"
        onChange={(e) => setSwiperIndex(e.detail.current)}>
        {vipCardList.map((item) => (
          <Swiper.Item key={item.level}>
            <View className="swiper-item">
              <CardVip user={user} level={item.level} title={item.title} />
            </View>
          </Swiper.Item>
        ))}
      </Swiper>
      <View className="background-top" />
      <View className="title">
        <View className="line-left" />
        <View className="text">可享4项会员权益</View>
        <View className="line-right" />
      </View>
      <View className="vip-info-xxx">
        <View className="content">
          <View className="invite-section">
            <Input
              className="invite-input"
              placeholder="请输入邀请码"
              value={inviteCode}
              onChange={(val) => setInviteCode(val)}
            />
          </View>

          <View className="info-section">
            <View className="section-title">说明：</View>
            <View className="info-text">
              <View>办理会员立即赠送990cc额度，可以用于生成视频</View>
              <View>填写邀请码，邀请者可获得100cc奖励</View>
            </View>
          </View>
        </View>
      </View>
      <Button
        block
        type="primary"
        className="submit-button"
        onClick={initPayment}>
        {/* ￥99  */}
        确认投喂
      </Button>
    </View>
  );
}

const onPaySuccess = () => {
  Taro.showToast({
    title: '支付成功',
    icon: 'none',
  });
  setTimeout(() => {
    Taro.navigateBack({ delta: 1 });
  }, 500);
};

const onFailed = () => {
  Taro.showToast({
    title: '支付失败',
    icon: 'none',
  });
};
